<template>
  <div class="notification-center">
    <!-- 通知中心头部 -->
    <div class="notification-header card">
      <div class="header-left">
        <h1 class="title">
          <el-icon><Bell /></el-icon>
          通知中心
        </h1>
        <div class="notification-stats">
          <el-badge :value="unreadCount" :hidden="unreadCount === 0">
            <span class="stats-text">{{ totalCount }} 条通知</span>
          </el-badge>
        </div>
      </div>
      <div class="header-actions">
        <el-button @click="markAllAsRead" :disabled="unreadCount === 0">
          全部已读
        </el-button>
        <el-button @click="clearAll">
          清空通知
        </el-button>
      </div>
    </div>

    <!-- 通知筛选器 -->
    <div class="notification-filters card">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="全部" name="all">
          <template #label>
            <span>全部</span>
            <el-badge :value="allCount" :hidden="allCount === 0" />
          </template>
        </el-tab-pane>
        
        <el-tab-pane label="点赞" name="like">
          <template #label>
            <span>👍 点赞</span>
            <el-badge :value="likeCount" :hidden="likeCount === 0" />
          </template>
        </el-tab-pane>
        
        <el-tab-pane label="评论" name="comment">
          <template #label>
            <span>💬 评论</span>
            <el-badge :value="commentCount" :hidden="commentCount === 0" />
          </template>
        </el-tab-pane>
        
        <el-tab-pane label="关注" name="follow">
          <template #label>
            <span>👥 关注</span>
            <el-badge :value="followCount" :hidden="followCount === 0" />
          </template>
        </el-tab-pane>
        
        <el-tab-pane label="系统" name="system">
          <template #label>
            <span>⚙️ 系统</span>
            <el-badge :value="systemCount" :hidden="systemCount === 0" />
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 通知列表 -->
    <div class="notification-list">
      <el-skeleton :loading="loading" animated>
        <template #template>
          <div v-for="n in 5" :key="n" class="skeleton-item card">
            <el-skeleton-item variant="circle" style="width: 40px; height: 40px" />
            <div style="margin-left: 16px; flex: 1">
              <el-skeleton-item variant="text" style="width: 60%" />
              <el-skeleton-item variant="text" style="width: 40%; margin-top: 8px" />
            </div>
          </div>
        </template>

        <template #default>
          <div v-if="notifications.length === 0" class="empty-state">
            <el-empty description="暂无通知">
              <el-button type="primary" @click="refreshNotifications">
                刷新通知
              </el-button>
            </el-empty>
          </div>

          <div v-else class="notification-items">
            <div v-for="notification in notifications" 
                 :key="notification.id"
                 :class="['notification-item', 'card', { 'unread': !notification.isRead }]"
                 @click="handleNotificationClick(notification)">
              
              <!-- 通知图标 -->
              <div class="notification-icon">
                <el-avatar :size="40" :src="notification.fromUser?.avatar">
                  <template #default>
                    <el-icon v-if="notification.type === 'system'"><Setting /></el-icon>
                    <span v-else>{{ notification.fromUser?.username?.charAt(0) }}</span>
                  </template>
                </el-avatar>
                <div class="type-badge" :class="notification.type">
                  <el-icon v-if="notification.type === 'like'"><Heart /></el-icon>
                  <el-icon v-else-if="notification.type === 'comment'"><ChatLineRound /></el-icon>
                  <el-icon v-else-if="notification.type === 'follow'"><User /></el-icon>
                  <el-icon v-else><Bell /></el-icon>
                </div>
              </div>

              <!-- 通知内容 -->
              <div class="notification-content">
                <div class="notification-text">
                  <span class="username" v-if="notification.fromUser">
                    {{ notification.fromUser.username }}
                  </span>
                  <span class="action">{{ notification.content }}</span>
                </div>
                
                <div class="notification-meta">
                  <span class="time">{{ formatTime(notification.createTime) }}</span>
                  <span class="target" v-if="notification.targetPost">
                    关于: {{ notification.targetPost.title }}
                  </span>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="notification-actions">
                <el-button 
                  v-if="!notification.isRead" 
                  text 
                  type="primary" 
                  @click.stop="markAsRead(notification)"
                >
                  标为已读
                </el-button>
                <el-button 
                  text 
                  type="danger" 
                  @click.stop="deleteNotification(notification)"
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </template>
      </el-skeleton>

      <!-- 分页 -->
      <div v-if="total > 0" class="pagination">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    
    <!-- 发布帖子按钮 -->
    <PostFab />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import PostFab from '@/components/PostFab.vue'

const router = useRouter()

// 数据状态
const loading = ref(false)
const notifications = ref([])
const total = ref(0)
const activeTab = ref('all')

// 分页
const pagination = reactive({
  page: 1,
  size: 10
})

// 计算属性
const unreadCount = computed(() => {
  return notifications.value.filter(n => !n.isRead).length
})

const totalCount = computed(() => notifications.value.length)
const allCount = computed(() => totalCount.value)
const likeCount = computed(() => notifications.value.filter(n => n.type === 'like').length)
const commentCount = computed(() => notifications.value.filter(n => n.type === 'comment').length)
const followCount = computed(() => notifications.value.filter(n => n.type === 'follow').length)
const systemCount = computed(() => notifications.value.filter(n => n.type === 'system').length)

// 方法
const fetchNotifications = async () => {
  // TODO: 获取通知列表
}

const handleTabChange = (tabName) => {
  // TODO: 切换通知类型
}

const handleNotificationClick = (notification) => {
  // TODO: 处理通知点击，跳转到相关内容
  if (!notification.isRead) {
    markAsRead(notification)
  }
  
  if (notification.targetPost) {
    router.push(`/post/${notification.targetPost.id}`)
  }
}

const markAsRead = (notification) => {
  // TODO: 标记单个通知为已读
}

const markAllAsRead = () => {
  // TODO: 标记所有通知为已读
}

const deleteNotification = (notification) => {
  // TODO: 删除单个通知
}

const clearAll = () => {
  // TODO: 清空所有通知
}

const refreshNotifications = () => {
  fetchNotifications()
}

const formatTime = (time) => {
  // TODO: 格式化时间
  return time
}

const handleSizeChange = (size) => {
  pagination.size = size
  pagination.page = 1
  fetchNotifications()
}

const handleCurrentChange = (page) => {
  pagination.page = page
  fetchNotifications()
}

onMounted(() => {
  fetchNotifications()
})
</script>

<style scoped>
/* TODO: 样式实现 */
.notification-center {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.notification-item.unread {
  background: #f0f9ff;
  border-left: 4px solid #409eff;
}

.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notification-icon {
  position: relative;
}

.type-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
}

.type-badge.like { background: #f56c6c; }
.type-badge.comment { background: #409eff; }
.type-badge.follow { background: #67c23a; }
.type-badge.system { background: #909399; }

.notification-content {
  flex: 1;
}

.notification-text {
  margin-bottom: 8px;
}

.username {
  font-weight: 600;
  color: #409eff;
  margin-right: 4px;
}

.notification-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #909399;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>